<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Video Player</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="player">
        <video class="player-video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>

        <div class="player-controls">
            <div class="progress">
                <div class="progress-filled"></div>
            </div>
            <button class="player-button toggle" title="Toggle Player">►</button>
            <input class="player-slider" type="range" name="volume" min=0 max=1 step=0.05 value=1>
            <input class="player-slider" type="range" name="playbackRate" min=0.5 max=2 step=0.1 value=1>
            <button class="player-button" data-skip="-10">« 10s</button>
            <button class="player-button"  data-skip="25">25s »</button>
            <button class="player-button full-screen">全屏</button>
        </div>
    </div>

    <script src="./script.js"></script>
</body>
</html>
